<template>
  <view class="chat-botton">
    <view class="chat-button-container">
      <!-- 新建对话 -->
      <image
        class="chat-button-card2"
        src="@/static/wlxzstytle/新建对话啊.png"
        mode="aspectFit"
        @click="createNewChat()"
      />
    </view>
    <!-- 聊天 -->
    <view class="chat-button-container">
      <image
        class="chat-botton-card1"
        src="@/static/wlxzstytle/聊天.png"
        mode="aspectFit"
        @click="handleClick()"
      />
    </view>
  </view>
  <!-- 历史对话 -->
  <view class="chat-button-history-container">
    <image
      class="chat-botton-history1"
      src="@/static/wlxzstytle/历史对话.png"
      mode="aspectFit"
      @click="handleHistoryClick()"
    />
    <image
      class="chat-botton-history"
      src="@/static/wlxzstytle/查看历史对话.png"
      mode="aspectFit"
      @click="handleHistoryClick()"
    />
    <view class="recent-history-container" v-if="recentHistory.length > 0">
    <view class="recent-history-list">
      <view
        v-for="(item, index) in recentHistory"
        :key="item.chatId"
        class="recent-history-item"
        @click="openChat(item.chatId)"
        @longpress="showDeleteMenu(item.chatId)"
      >
        <image
          class="recent-avatar"
          :src="getAvatarPath(index)"
          mode="aspectFill"
        ></image>
        <view class="recent-item-content">
          <view class="recent-item-title u-line-1">{{ item.title }}</view>
          <view class="recent-item-time">{{ item.firstMessageTime }}</view>
        </view>
      </view>
      <view class="recent-divider-line"></view>
    </view>
  </view>
  </view>
  <view></view>
</template>

<script setup>
import { useHistoryStore } from "@/store/modules/chat/history";
import { useChatStore } from "@/store/modules/chat/chat";
import { onMounted, ref, computed } from "vue";

const chatStore = useChatStore();
const historyStore = useHistoryStore();

// 计算最近4条历史对话
const recentHistory = computed(() => {
  return historyStore.processedHistory?.slice(0, 4) || [];
});

const handleHistoryClick = () => {
  historyStore.fetchHistoryList();
  uni.$u.route({
    url: "/pages_chat/pages/history/index",
  });
};
/**
 * 创建新对话
 * 当用户点击相关组件时，调用此函数触发页面跳转
 * 使用 uni.$u.route 方法跳转到指定的聊天页面路径
 */
const createNewChat = () => {
  historyStore.createNewChat();
  console.log("新的对话ID已创建:", historyStore.currentChatId);
  chatStore.clearMessages();
  uni.$u.route({
    url: "/pages_chat/pages/chat/index",
  });
};

/**
 * 处理点击事件，用于导航到聊天页面
 * 当用户点击相关组件时，调用此函数触发页面跳转
 * 使用 uni.$u.route 方法跳转到指定的聊天页面路径
 */
const handleClick = () => {
  // 调用 uni.$u.route 方法进行页面跳转
  // 指定跳转的目标页面路径为 /pages/wlxz/chat/index
  uni.$u.route({
    url: "/pages_chat/pages/chat/index",
  });
};

/**
 * 处理匿名点击事件，用于导航到匿名聊天页面
 * 当用户点击相关组件时，调用此函数触发页面跳转
 * 使用 uni.$u.route 方法跳转到指定的匿名聊天页面路径
 */
const handleAnonymousClick = () => {
  // 调用 uni.$u.route 方法进行页面跳转
  // 指定跳转的目标页面路径为 /pages/wlxz/chat/anonymous
  uni.$u.route({
    url: "/pages_chat/pages/anonymous/index",
  });
};

// 页面加载时获取历史对话数据
onMounted(() => {
  historyStore.fetchHistoryList();
});

// 计算头像图片路径
const getAvatarPath = (index) => {
  const imageIndex = (index % 3) + 1;
  return `/static/wlxzstytle/前缀图${imageIndex}.png`;
};

// 打开指定对话
const openChat = (chatId) => {
  chatStore.clearMessages();
  console.log("首页打开历史对话id: " + chatId);
  uni.$u.route({
    url: "/pages_chat/pages/chat/index",
    params: { chatId },
  });
};

// 显示删除菜单（长按触发）
const showDeleteMenu = (chatId) => {
  uni.showActionSheet({
    itemList: ['删除对话'],
    itemColor: '#ff4d4f',
    success: (res) => {
      if (res.tapIndex === 0) {
        deleteChat(chatId);
      }
    },
    fail: (res) => {
      console.log(res.errMsg);
    }
  });
};

// 删除对话
const deleteChat = async (chatId) => {
  uni.showModal({
    title: "确认删除",
    content: "确定要删除这条历史对话吗？删除后将无法恢复。",
    confirmColor: "#ff4d4f",
    success: async (res) => {
      if (res.confirm) {
        try {
          await historyStore.removeHistoryChat(chatId);
          uni.showToast({
            title: "删除成功",
            icon: "success",
          });
        } catch (error) {
          uni.showToast({
            title: "删除失败",
            icon: "error",
          });
        }
      }
    },
  });
};
</script>

<style scoped>
.chat-botton {
  top: 10px;
  width: 100%;
  height: 94px;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  margin: auto;
  position: relative;
  display: flex;
  justify-content: center;
}
.chat-button-container {
  width: 45%;
  height: 94px;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  margin: auto;
}
.chat-botton-card1 {
  width: 45%;
  height: 100px;
  opacity: 1;
  position: absolute;
  margin: auto;
}
.chat-button-card2 {
  width: 45%;
  height: 100px;
  opacity: 1;
  position: absolute;
  margin: auto;
}

.chat-button-history-container {
  width: 100%;
  top: 20px;
  height: 100px;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  margin: auto;
  position: relative;
}
.chat-botton-history {
  width: 20%;
  top: 18%;
  height: 20%;
  opacity: 1;
  position: absolute;
  right: 5%;
  margin: 0;
}
.chat-botton-history1 {
  width: 15%;
  top: 18%;
  height: 20%;
  opacity: 1;
  position: absolute;
  left: 7%;
  margin: 0;
}

.chat-button-icon {
  position: relative;
  width: 55.15px;
  left: 60%;
  height: 74.17px;
  opacity: 1;
  transform: rotate(6.58deg);
  margin: auto;
}
.chat-button-text {
/** 文本1 */
font-size: 18px;
font-weight: 700;
letter-spacing: 0px;
line-height: 26.06px;
color: rgba(0, 122, 255, 1);
text-align: left;
vertical-align: top;

}
.u-cell-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 8rpx;
}
/**
 * 定义最近历史对话容器的样式
 * margin: 20rpx  设置容器四周的外边距为 20rpx
 * background: white  设置容器的背景颜色为白色
 * border-radius: 12rpx  设置容器的圆角半径为 12rpx
 * overflow: hidden  隐藏超出容器边界的内容
 * position: absolute  设置容器的定位方式为绝对定位
 * top:20%  设置容器距离顶部的位置为父元素高度的 20%
 * width: 90%  设置容器的宽度为父元素宽度的 90%
 */
/* 最近历史对话样式 */
.recent-history-container {
  margin: auto;
  top: 50%;
  background: white;
  border-radius: 12rpx;
  overflow: hidden;
  /* box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); */
  position: absolute;
  width: 90%;
  align-items: center;
  left: 5%;
}

.recent-history-title {
  padding: 30rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;
}

.recent-history-list {
  max-height: 600rpx;
  overflow-y: auto;
}

.recent-history-item {
  display: flex;
  align-items: center;
  padding: 25rpx;
  border-bottom: 1rpx solid #f5f5f5;
  transition: background-color 0.2s;
}

.recent-history-item:active {
  background-color: #f8f8f8;
}

.recent-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.recent-item-content {
  flex: 1;
  min-width: 0;
}

.recent-item-title {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.recent-item-time {
  font-size: 24rpx;
  color: #999;
}

.recent-divider-line {
  width: 100%;
  height: 1rpx;
  background-color: #f5f5f5;
}

.more-history {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx;
  color: #999;
  font-size: 28rpx;
}

.more-history:active {
  background-color: #f8f8f8;
}
</style>
